<html>
<head>
<script src="../../main/resources/net/pimpas/web/jsf/components/js/pimpas/pimpas.js"></script>
<script>
// detect
pimpas.RequireJS( 'detect.js' );
// listener
pimpas.RequireJS( 'listener.js' );
// listener
pimpas.RequireJS( 'filter.js' );
// log
pimpas.RequireJS( 'log.js' );
// timer
pimpas.RequireJS( 'timer.js' );
// interval
pimpas.RequireJS( 'interval.js' );
// dom
pimpas.RequireJS( 'dom.js' );
// dom event
pimpas.RequireJS( 'event.js' );
// httprequest
pimpas.RequireJS( 'httpRequest.js' );
// ajax
pimpas.RequireJS( 'ajax.js' );
// ajaxpopulate
pimpas.RequireJS( 'ajaxPopulate.js' );
// input
pimpas.RequireJS( 'populate/input.js' );
// select
pimpas.RequireJS( 'populate/select.js' );
// select
pimpas.RequireJS( 'populate/radio.js' );
// checkbox
pimpas.RequireJS( 'populate/checkbox.js' );
// html
pimpas.RequireJS( 'populate/html.js' );
// xml
pimpas.RequireJS( 'xml.js' );
// xpath
pimpas.RequireJS( 'xpath.js' );
// json
pimpas.RequireJS( 'json.js' );
// control
pimpas.RequireJS( 'control/ajaxControl.js');
</script>
<script>
function addOption(id) {
	var text =null;
	var value = null;
	if((text=window.prompt("Input the Text:", "")))
		if((value=window.prompt("Input the Value", 0)))
			pimpas.DOM.addOption( id, text, value);
	
}
function removeOption(id) {
	var value = null
	if((value=window.prompt("Input the Value to Remove:", 0)))
		pimpas.DOM.removeOption( id, value);
}
function setValue(id) {
	var value = null
	if((value=window.prompt("Input the Value:", "Your Name")))
		pimpas.DOM.setObjectValue( id, value );
}

function serialize(obj) {
	alert(pimpas.DOM.serialize(obj));
}
</script>
<style>
#myDiv {
	background-color: pink;
	width: 100px;
	height: 120px;
	display: block;
	overflow: auto;
}
#mySpan {
	background-color: yellow;
	width: 100px;
	height: 120px;
	display: block;
	overflow: auto;
}
#myRadioGroup {
	background-color: #00CCFF;
}
#myCheckboxGroup {
	background-color: #FFFFCC;
	
}
</style>
</head>
<body>
<a href="javascript:pimpas.DOM.scrollTo( 'itsMeDown' );" id="itsMeUp">SCROLL DOWN</a>
<br />
<form>
<input type="button" name="addOptionName" value="addOptionName" onClick="addOption('comboTeste')">
<input type="button" name="removeOptionName" value="removeOptionName" onClick="removeOption('comboTeste')">
<input type="button" name="setValueName" value="setValue" onClick="setValue('comboTeste')">
<input type="button" name="getValueName" value="getValue" onClick="alert(pimpas.DOM.getObjectValue('comboTeste'))">
<select id="comboTeste" multiple="multiple" size="10"><option value="-1" selected="selected">Selecione</option></select>
<hr />
Name: <input type="text" id="myName"/><input type="button" id="changeName" value="changeName" onClick="setValue('myName')" />
<input type="button" value="toReadOnly" onClick="pimpas.DOM.toReadOnly( 'myName' );" />
<input type="button" value="toDisable" onClick="pimpas.DOM.toDisable( 'myName' );" />
<input type="button" value="toReadWrite" onClick="pimpas.DOM.toReadWrite( 'myName' );" />
<input type="button" value="toEnable" onClick="pimpas.DOM.toEnable( 'myName' );" />
<hr />
Show DIV: <div id="myDiv"></div>
<input type="button" value="showDIV" onClick="pimpas.DOM.toVisible( 'myDiv' );" />
<input type="button" value="hideDIV" onClick="pimpas.DOM.toHidden( 'myDiv' );" />
<input type="button" value="toggleVisiblity" onClick="pimpas.DOM.toggleVisibility( 'myDiv' );" />
<hr />
SPAN INNERHTML: <span id="mySpan"></span>
<!-- 
pimpas.DOM.update set the innerHTML value using stripHtml, stripScripts...
pimpas.DOM.setObjectValue set only the value of object or simple innerHTML
//-->
<input type="button" value="setHTML" onClick="pimpas.DOM.update( 'mySpan', window.prompt('Input the HTML VALUE: ', ''));" />
<input type="button" value="getVALUE" onClick="alert(pimpas.DOM.getObjectValue( 'mySpan' ));" />
<hr />
<span id="myRadioGroup">
Radio:
	<input type="radio" id="myRadio" name="food" value="0" />Meet
	<input type="radio" name="food" value="1" />Milk
	<input type="radio" name="food" value="2" />Bean
	<br />
	<input type="button" value="getVALUE" onClick="alert(pimpas.DOM.getObjectValue( 'myRadio' ));" />
	<input type="button" value="setVALUE" onClick="pimpas.DOM.setObjectValue( 'myRadio', window.prompt('Input the HTML VALUE: ', 0));" />
</span>
<hr />
<span id="myCheckboxGroup">
Checkbox:
	<input type="checkbox" name="names" value="0" />Paul
	<input type="checkbox" name="names" value="1" />Jason
	<input type="checkbox" name="names" value="2" />Richard
	<br />
	<input type="button" value="getVALUE" onClick="alert(pimpas.DOM.getObjectValue( 'names' ));" />
	<input type="button" value="setVALUE" onClick="pimpas.DOM.setObjectValue( 'names', window.prompt('Input the HTML VALUE: ', 0));" />
</span>
<hr />
<select id="multipleSelects" name="multipleSelects" multiple="multiple">
	<option value="0">Default</option>
	<option value="1">Another</option>
</select>
<input type="button" value="Serialize Form" onClick="alert(pimpas.DOM.serializeForm(this))" />
<hr>
Checked: <input type="checkbox" id="chk" name="chk" value="true"><input type="button" value="getVALUE" onClick="alert(pimpas.DOM.getObjectValue( 'chk' ));" />
<input type="button" value="serialize" onClick="serialize('chk')"/>
</form>

<div style="visibility: hidden; display: none;">
<form id="secondForm">
	<input type="checkbox" name="chtestes" value="paul" checked="true"/>
	<input type="checkbox" name="chtestes" value="jack" checked="true"/>
	<input type="checkbox" name="chtestes" value="richard"/>
	<input type="checkbox" name="chtestes" value="eduard"/>
	<input type="checkbox" name="chtestes" value="takanusma"/>
	<input type="checkbox" name="chtestes" value="Roger"/>
</form>

<script>
var breakSubmit = new pimpas.Filter();
breakSubmit.accept = function(el) {
	return !(pimpas.DOM.isSubmit(el));
}
alert(pimpas.DOM.serializeForm( 'secondForm', breakSubmit ));
</script>
</div>

<hr />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="javascript:pimpas.DOM.scrollTo( 'itsMeUp' );" id="itsMeDown">SCROLL UP!</a>
<script>
</script>
<table id="testeTable">
	<tr>
	<td>teste</td>
	</tr>
</table>
<input type="button" onClick="alert(pimpas.DOM.getObjectValue( 'testeTable' ))" value="teste">
</body>
</html>